<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta charset="UTF-8">
    <title>Excel刷题</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/xlsx/0.15.1/xlsx.core.min.js"></script>
	<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
	<style type="text/css">
		li:hover{
			cursor:pointer;
		}
		li:nth-child(1):hover{
			cursor: text;
		}
		li:nth-child(2):hover{
			cursor: text;
		}
		div#container,#demo{
			text-align: center;
			text-align: -webkit-center;
		}
		table.table td{
			text-align: center;
			text-align: -webkit-center;
		}
		table.table td:hover{
			cursor:pointer;
		}
		table.table{
			table-layout:fixed;/*列宽由表格宽度和列宽度设定。*/
		}
	</style>
</head>
<body>
	<div id="choose" align="center">
		<h1 style="font-family: arial,'楷体'">Excel刷题工具</h1>
		<input type="file" style="display: none" id="excel-file">
		<button class="btn btn-primary" onClick="javascript:selectFile()" style="width: 10em; font-size:1.5em;">选择题库</button>
	</div>
	<div id="question" style="display: none; margin-top:20px;">
		<ul id="item" style="padding-right:40px;">
			<li class="list-group-item active"><div id="type"></div></li>
			<li class="list-group-item"><div id="title"></div></li>
			<li class="list-group-item list-group-item-action tc"></li>
			<li class="list-group-item list-group-item-action tc"></li>
			<li class="list-group-item list-group-item-action tc"></li>
			<li class="list-group-item list-group-item-action tc"></li>
		</ul>
		<div id="truth" style="display: none;padding-left:40px;color:green;font-weight: bold;"></div>
		<div id="container">
			<button class="btn btn-primary" style="margin-bottom: 20px;display: none;">确定</button>
			 <ul class="pagination" style="width: 360px;">
			    <li class="page-item"><a class="page-link" href="#"><</a></li>
				<li class="page-item active"><a class="page-link" href="#">首页</a></li>
				<li class="page-item active"><a class="page-link" href="#">首题</a></li>
				<li class="page-item"><a class="page-link" data-toggle="collapse" data-target="#demo" href="#">题集</a></li>
				<li class="page-item"><a class="page-link" href="#">尾题</a></li>
				<li class="page-item"><a class="page-link" href="#">尾页</a></li>
			    <li class="page-item"><a class="page-link" href="#">></a></li>
			  </ul>
		</div>
		<div id="demo" class="collapse">
		    <table class="table" style="width:90%;">
			</table>
		</div>
	</div>
	<script>
	var clicknum=0;
	var numclick=[0]
	var choose=0;
	var t=1;//题号
	var flag=[0];
	var json=[],json1=[],json2=[],json3=[];
	var clicknumT=0;
		
	function selectFile() {
		document.getElementById('excel-file').click();
	}
	// 读取本地excel文件
	function readWorkbookFromLocalFile(file, callback) {
	    var reader = new FileReader();
	    reader.onload = function(e) {
	        var data = e.target.result;
	        var workbook = XLSX.read(data, {type: 'binary'});// 以二进制流方式读取得到整份excel表格对象
	        if(callback) callback(workbook);
	    };
	    reader.readAsBinaryString(file);
	}

	// 读取 excel文件
	function outputWorkbook(workbook) {
	    var sheetNames = workbook.SheetNames; // 工作表名称集合
	    sheetNames.forEach(name => {
	        var worksheet = workbook.Sheets[name]; // 只能通过工作表名称来获取指定工作表
	        for(var key in worksheet) {
	            // v是读取单元格的原始值
	            console.log(key, key[0] === '!' ? worksheet[key] : worksheet[key].v);
	        }
	    });
	}

	function readWorkbook(workbook) {
		var sheetNames = workbook.SheetNames; // 工作表名称集合
		var worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet
		var worksheet1 = workbook.Sheets[sheetNames[1]];
		var worksheet2 = workbook.Sheets[sheetNames[2]];
		var worksheet3 = workbook.Sheets[sheetNames[3]];
		json = XLSX.utils.sheet_to_json(worksheet);
		json1 = XLSX.utils.sheet_to_json(worksheet1);
		json2 = XLSX.utils.sheet_to_json(worksheet2);
		json3 = XLSX.utils.sheet_to_json(worksheet3);
		console.log(json.length);
		$("div#question").css({
			display: "block"
		});
		// document.getElementById("question").innerHTML=showQuestion(json);
		setInfo();
	}
	
	function setInfo(){
		if(t<json.length){
			$("#type").html("一、选择题");
			var keys = Object.keys(json[t]);
			$("#title").html("&emsp;"+json[t][keys[0]]+".&emsp;"+json[t][keys[1]]);
			for(var i=2;i<=5;i++){
				var html = "";
				switch(i){
					case 2:html+="&emsp;A.&emsp;";break;
					case 3:html+="&emsp;B.&emsp;";break;
					case 4:html+="&emsp;C.&emsp;";break;
					case 5:html+="&emsp;D.&emsp;";break;
				}
				html+=json[t][keys[i]];
				$("ul#item li:nth-child("+(i+1)+")").css({
					display:"block"
				});
				$("ul#item li:nth-child("+(i+1)+")").html(html);
			}
			$("#container .btn").css({
				display:"none"
			});
			choose=(json[t][keys[6]]).trim().replace(/\s/g,"");
		}else if(t<(json.length+json1.length-1)){
			$("#type").html("二、判断题");
			var keys = Object.keys(json1[t-json.length+1]);
			$("#title").html("&emsp;"+json1[t-json.length+1][keys[0]]+".&emsp;"+json1[t-json.length+1][keys[1]]);
			for(var i=2;i<=3;i++){
				var html = "";
				switch(i){
					case 2:html+='&emsp;<div class="custom-control custom-radio custom-control-inline"><input type="radio" class="custom-control-input" id="customRadio1" name="example"><label class="custom-control-label" for="customRadio1">对</label></div>&emsp;';break;
					case 3:html+='&emsp;<div class="custom-control custom-radio custom-control-inline"><input type="radio" class="custom-control-input" id="customRadio2" name="example"><label class="custom-control-label" for="customRadio2">错</label></div>&emsp;';break;
				}
				$("ul#item li:nth-child("+(i+3)+")").css({
					display:"none"
				});
				$("ul#item li:nth-child("+(i+1)+")").css({
					display:"block"
				});
				$("ul#item li:nth-child("+(i+1)+")").html(html);
			}
			$("#container .btn").css({
				display:"none"
			});
			choose=(json1[t-json.length+1][keys[2]]).trim().replace(/\s/g,"");
			jiexi=(json1[t-json.length+1][keys[3]]);
		}else if(t<(json.length+json1.length+json2.length-2)){
			$("#type").html("三、填空题");
			var keys = Object.keys(json2[t-json.length-json1.length+2]);
			$("#title").html("&emsp;"+json2[t-json.length-json1.length+2][keys[0]]+".&emsp;"+json2[t-json.length-json1.length+2][keys[1]]);
			for(var i=2;i<=4;i++){
				$("ul#item li:nth-child("+(i+2)+")").css({
					display:"none"
				});
			}
			$("#container .btn").css({
				display:"none"
			});
			$("ul#item li:nth-child(3)").html('<label for="info">答案:</label> <input type="text" class="form-control" placeholder="此处填写答案" id="info">')
			choose=json2[t-json.length-json1.length+2][keys[2]];
		}else if(t<(json.length+json1.length+json2.length+json3.length-3)){
			$("#type").html("三、多选题");
			var keys = Object.keys(json3[t-json.length-json1.length-json2.length+3]);
			$("#title").html("&emsp;"+json3[t-(json.length+json1.length+json2.length-3)][keys[0]]+".&emsp;"+json3[t-(json.length+json1.length+json2.length-3)][keys[1]]);
			for(var i=2;i<=5;i++){
				var html = "";
				switch(i){
					case 2:html+="&emsp;A.&emsp;";break;
					case 3:html+="&emsp;B.&emsp;";break;
					case 4:html+="&emsp;C.&emsp;";break;
					case 5:html+="&emsp;D.&emsp;";break;
				}
				html+=json3[t-(json.length+json1.length+json2.length-3)][keys[i]];
				$("ul#item li:nth-child("+(i+1)+")").css({
					display:"block"
				});
				$("ul#item li:nth-child("+(i+1)+")").html(html);
			}
			$("#container .btn").css({
				display:"block"
			});
			choose=(json3[t-(json.length+json1.length+json2.length-3)][keys[6]]).trim().replace(/\s/g,"");
		}
	}
	
	function jumpToPage(){
		setInfo();
		clicknum=0;
		$("ul#item li").removeClass("list-group-item-success");
		$("ul#item li").removeClass("list-group-item-danger");
		for(var i=0;i<4;i++){
			$("ul#item li:nth-child("+(i+3)+")").addClass("list-group-item-action");
		}
	}
	
	$("ul#item li.tc").click(function(){
		clicknum++;
		var result="";
		var trueth=0;
		if(t<(json.length+json1.length-1)){
			choose=choose.trim().replace(/(\s)|[',','，','。','《','》',';','；','、','?','？','&','*','@','$','%','！','!','^','(',')','（',')']/g,"");
			if(t<json.length){
				// console.log($(this).index());
				switch($(this).index()-1){
					case 1:result="A";break;
					case 2:result="B";break;
					case 3:result="C";break;
					case 4:result="D";break;
				}
			}else{
				switch($(this).index()-1){
					case 1:result="对";break;
					case 2:result="错";break;
				}
			}
			if(clicknum==1){
				$(this).find("input.custom-control-input").attr({
					checked:"checked"
				});
				$(this).siblings("li").find("input.custom-control-input").attr({
					disabled:"true"
				});
				result=result.trim().replace(/\s/g,"");
				$("ul#item li").removeClass("list-group-item-action");
				if(choose+""==result+""){
					flag[t-1]=1;
					$("table.table td").removeClass("btn-primary");
					$("table.table td").eq(t-1).removeClass("table-active");
					$("table.table td").eq(t-1).removeClass("table-success");
					$("table.table td").eq(t-1).removeClass("table-danger");
					$("table.table td").eq(t-1).addClass("table-success");
					if(flag[t]!=0&&flag[t]!=null){$("table.table td").eq(t).addClass("btn-primary");}
					else{$("table.table td").eq(t).addClass("btn-primary table-active");}
					$(this).addClass("list-group-item-success");
					setTimeout(function(){
						if(t==json.length+json1.length+json2.length-3){
						}else{
							t++;
							jumpToPage();
						}
						$("ul.pagination li:nth-child(2)").removeClass("active");
						if(t==json.length-1){
							$("ul.pagination li:nth-last-child(2)").addClass("active");
						}
					},500);
				}
				else{
					if(t<json.length){
						switch(choose){
							case "A":trueth=1;break;
							case "B":trueth=2;break;
							case "C":trueth=3;break;
							case "D":trueth=4;break;
						}
					}else if(t<(json.length+json1.length-1)){
						switch(choose){
							case "对":trueth=1;break;
							case "错":trueth=2;break;
						}
						if(jiexi!=undefined){
							$("div#truth").text("答案解析："+jiexi);
							$("div#truth").css({
								display:"block",
								color:"red"
							});
						}
					}
					var num = trueth+2;
					flag[t-1]=2;
					$("table.table td").removeClass("btn-primary");
					$("table.table td").eq(t-1).removeClass("table-active");
					$("table.table td").eq(t-1).removeClass("table-success");
					$("table.table td").eq(t-1).removeClass("table-danger");
					$("table.table td").eq(t-1).addClass("table-danger");
					$("ul#item li:nth-child("+num+")").addClass("list-group-item-success");
					$(this).addClass("list-group-item-danger");
				}
			 }	
		}
		if(t>=(json.length+json1.length+json2.length-2)){
			var num = $(this).index()+1;
			numclick[clicknum-1]=$(this).index()-1;
			console.log(numclick);
			var isdouble=false;
			for(var i=0;i<numclick.length-1;i++){
				if(numclick[clicknum-1]==numclick[i]){
					numclick[i]=0;
					numclick[clicknum-1]=0;
					isdouble=true;
					break;
				}
			}
			if(!isdouble){
				$("ul#item li:nth-child("+num+")").addClass("list-group-item-secondary");
			}
			else{
				$("ul#item li:nth-child("+num+")").removeClass("list-group-item-secondary");
			}
		}
		$("input#info").blur(function(){
			if(t>=(json.length+json1.length-1)){
				result = $("#info").val().trim().replace(/(\s)|[',','，','。','《','》',';','；','、','?','？','&','*','@','$','%','！','!','^','(',')','（',')']/g,"");
				// console.log(result+" "+choose);
				$("div#truth").text("正确答案："+choose);
				choose=choose.trim().replace(/(\s)|[',','，','。','《','》',';','；','、','?','？','&','*','@','$','%','！','!','^','(',')','（',')']/g,"");
				if(result==choose){
					flag[t-1]=1;
					$("table.table td").removeClass("btn-primary");
					$("table.table td").eq(t-1).removeClass("table-active");
					$("table.table td").eq(t-1).removeClass("table-success");
					$("table.table td").eq(t-1).removeClass("table-danger");
					$("table.table td").eq(t-1).addClass("table-success");
					$("table.table td").eq(t).addClass("btn-primary table-active");
					$(this).css({
						border:"2px solid green",
					});
					$("div#truth").css({
						display:"block",
						color:"green"
					});
				}else{
					flag[t-1]=2;
					$("table.table td").removeClass("btn-primary");
					$("table.table td").eq(t-1).removeClass("table-active");
					$("table.table td").eq(t-1).removeClass("table-success");
					$("table.table td").eq(t-1).removeClass("table-danger");
					$("table.table td").eq(t-1).addClass("table-danger");
					$(this).css({
						border:"2px solid red"
					});
					$("div#truth").css({
						display:"block",
						color:"red"
					});
				}
			}
		});
	});
	function pageControlTable(){
		$("table.table td").removeClass("btn-primary");
		if(flag[t]==0||flag[t]==null) $("table.table td").eq(t-1).addClass("btn-primary table-active");
		else $("table.table td").eq(t-1).addClass("btn-primary");
	}
	$("ul.pagination li").click(function(e){
		if($(this).index()!=3){
			$("div#truth").css({
				display:"none",
				color:"green"
			});
		}
		switch($(this).index()){
			case 0: 
				t==1?t=1:t--;
				pageControlTable();
				jumpToPage();
				switch(t){
					case 1:
					case json.length:
					case (json.length+json1.length-1):
						$("ul.pagination li:nth-child(3)").addClass("active");break;
					case (json.length-1):
						$("ul.pagination li:nth-child(2)").addClass("active");
						$("ul.pagination li:nth-child(3)").removeClass("active");
						$("ul.pagination li:nth-last-child(3)").addClass("active");
						break;
					case (json.length+json1.length-2):
						$("ul.pagination li:nth-child(3)").removeClass("active");
						$("ul.pagination li:nth-last-child(3)").addClass("active");
						$("ul.pagination li:nth-last-child(2)").removeClass("active");
						break;
					case (json.length-2):
					case (json.length+json1.length-3):
					case (json.length+json1.length+json2.length-4):
						$("ul.pagination li:nth-last-child(3)").removeClass("active");break;
				}
				break;
			case 1:
				t=1;
				pageControlTable();
				jumpToPage();
				$("ul.pagination li:nth-child(2)").addClass("active");
				$("ul.pagination li:nth-last-child(2)").removeClass("active");
				$("ul.pagination li:nth-child(3)").addClass("active");
				$("ul.pagination li:nth-last-child(3)").removeClass("active");
				break;
			case 2: 
				if(t<json.length){
					t=1;
				}else if(t<(json.length+json1.length-1)){
					t=json.length;
				}else if(t<(json.length+json1.length+json2.length-2)){
					t=json.length+json1.length-1;
				}else if(t<(json.length+json1.length+json2.length+json3.length-3)){
					t=json.length+json1.length+json3.length-2;
				}
				pageControlTable();
				jumpToPage();
				$("ul.pagination li:nth-child(3)").addClass("active");
				$("ul.pagination li:nth-last-child(3)").removeClass("active");
				break;
			case 3:
				if(clicknumT==0){
					$("ul.pagination li:nth-child(4)").addClass("active");
					clicknumT=1;
				}
				if(clicknumT==1){
					$("ul.pagination li:nth-child(4)").removeClass("active");
					clicknumT=0;
				}
				break;
			case 4: 
				if(t<json.length){
					t=json.length-1;
				}else if(t<(json.length+json1.length-1)){
					t=json.length+json1.length-2;
				}else if(t<(json.length+json1.length+json2.length-2)){
					t=json.length+json1.length+json2.length-3;
				}else if(t<(json.length+json1.length+json2.length+json3.length-3)){
					t=json.length+json1.length+json2.length+json3.length-4;
				}
				
				pageControlTable();
				jumpToPage();
				$("ul.pagination li:nth-child(3)").removeClass("active");
				$("ul.pagination li:nth-last-child(3)").addClass("active");
				break;
			case 5:
				t=json.length+json1.length+json2.length-3;
				pageControlTable();
				jumpToPage();
				$("ul.pagination li:nth-child(2)").removeClass("active");
				$("ul.pagination li:nth-last-child(2)").addClass("active");
				$("ul.pagination li:nth-child(3)").removeClass("active");
				$("ul.pagination li:nth-last-child(3)").addClass("active");
				break;
			case 6: 
				t==json.length+json1.length+json2.length+json3.length-4?t=json.length+json1.length+json2.length+json3.length-4:t++;
				pageControlTable();
				jumpToPage();
				// console.log(json.length+json1.length);
				switch(t){
					case 2:
					case (json.length+1):
					case (json.length+json1.length):
						$("ul.pagination li:nth-child(3)").removeClass("active");break;
					case (json.length-1):
					case (json.length+json1.length-2):
					case (json.length+json1.length+json2.length-3):
						$("ul.pagination li:nth-last-child(3)").addClass("active");break;
					case json.length:
						$("ul.pagination li:nth-child(2)").removeClass("active");
						$("ul.pagination li:nth-last-child(3)").removeClass("active");
						$("ul.pagination li:nth-child(3)").addClass("active");
						break;
					case (json.length+json1.length-1):
						$("ul.pagination li:nth-last-child(3)").removeClass("active");
						$("ul.pagination li:nth-child(3)").addClass("active");
						$("ul.pagination li:nth-last-child(2)").addClass("active");
						break;
				}
				break;
		}
	});
	
	/* function showQuestion(json){
		var html = "";
		for(var i=1;i<=400;i++){
			var keys = Object.keys(json[i]);
			 html+= json[i][keys[0]]+". ";
			for (var j=1; j<keys.length-1;j++) {
				switch(j){
					case 2:html+="&emsp;A. ";break;
					case 3:html+="&emsp;B. ";break;
					case 4:html+="&emsp;C. ";break;
					case 5:html+="&emsp;D. ";break;
				}
			    html += json[i][keys[j]] + "<br>";
			}
		}
		return html;
	} */

    //给input标签绑定change事件，一上传选中的.xls文件就会触发该函数
    $('#excel-file').change(function(e) {
        var files = e.target.files;
        if(files.length == 0) return;
        var f = files[0];
		if(!/\.xlsx$/g.test(f.name)) {
			alert('仅支持读取xlsx格式！');
			return;
		}
		readWorkbookFromLocalFile(f, function(workbook) {
			readWorkbook(workbook);
			var html="";
			for(var i=0;i<(json.length+json1.length+json2.length+json3.length-4)/10;i++){
			        html+="<tr>";
			        for(var j=1;j<=10;j++){
			            html+="<td>"+((i*10)+j)+"</td>";   
			        }
			        html+="</tr>";   
			}
			$("table.table").html(html);
			$("table.table td").eq(0).addClass("btn-primary table-active");
			$("table.table td").hover(function(){
			    $(this).addClass("table-primary");
			    },function(){
			    $(this).removeClass("table-primary");
			});
			$("table.table td").click(function(){
				t=$(this).text();
				jumpToPage();
				$("div#demo").removeClass("show");
				$("ul.pagination li:nth-child(4)").removeClass("active");
				clicknumT=0;
				if($(this).index()!=3){
					$("div#truth").css({
						display:"none",
						color:"green"
					});
				}
				if(parseInt(t)<json.length){
					$("ul.pagination li:nth-child(2)").addClass("active");
					if(t==1+""){
						$("ul.pagination li:nth-child(3)").addClass("active");
					}
					else{
						$("ul.pagination li:nth-child(3)").removeClass("active");
					}
					if(parseInt(t)==json.length-1){
						$("ul.pagination li:nth-last-child(3)").addClass("active");
					}else{
						$("ul.pagination li:nth-last-child(3)").removeClass("active");
					}
				}
				else{
					$("ul.pagination li:nth-child(2)").removeClass("active");
				}
				if(parseInt(t)>=json.length&&parseInt(t)<json.length+json1.length-1){
					if(t==json.length+""){
						$("ul.pagination li:nth-child(3)").addClass("active");
					}
					else{
						$("ul.pagination li:nth-child(3)").removeClass("active");
					}
					if(parseInt(t)==json.length+json1.length-2){
						$("ul.pagination li:nth-last-child(3)").addClass("active");
					}else{
						$("ul.pagination li:nth-last-child(3)").removeClass("active");
					}
				}
				if(parseInt(t)>=json.length+json1.length-1&&parseInt(t)<json.length+json1.length+json2.length-2){
					$("ul.pagination li:nth-last-child(2)").addClass("active");
					if(t==json.length+json1.length-1+""){
						$("ul.pagination li:nth-child(3)").addClass("active");
					}
					else{
						$("ul.pagination li:nth-child(3)").removeClass("active");
					}
					if(parseInt(t)==json.length+json1.length+json2.length-3){
						$("ul.pagination li:nth-last-child(3)").addClass("active");
					}else{
						$("ul.pagination li:nth-last-child(3)").removeClass("active");
					}
				}
				else{
					$("ul.pagination li:nth-last-child(2)").removeClass("active");
				}
				$("table.table td").removeClass("btn-primary");
				if(flag[t-1]==0||flag[t-1]==null) $(this).addClass("btn-primary table-active");
				else $(this).addClass("btn-primary");
			});
		});
		$("#choose button.btn").html(document.getElementById('excel-file').files[0].name);
    });

	function load(){
     
    document.addEventListener('touchstart',touch, false);
    document.addEventListener('touchmove',touch, false);
    document.addEventListener('touchend',touch, false);
     
    function touch (event){
        var event = event || window.event;
             
        var oInp = document.getElementById("inp");
        var distance,clientX_start,clientX_end,
            minRange=10;
            this.clientX_start;
            this.direction;
 
            this.callbackFun=function(){
            if(this.direction=='ltr') {
            	$("ul.pagination li:nth-child(2)").removeClass("active");
            	$("ul.pagination li:nth-child(3)").removeClass("active");
                // console.log('从左往右');
                t==1?t=1:t--;
				pageControlTable();
				jumpToPage();
				this.direction="";
            }
            else if(this.direction=='rtl') {
            	$("ul.pagination li:nth-last-child(2)").removeClass("active");
            	$("ul.pagination li:nth-last-child(3)").removeClass("active");
                // console.log('从右往左');
                t==json.length+json1.length+json2.length-3?t=json.length+json1.length+json2.length-3:t++;
		        pageControlTable();
		        jumpToPage();
		        this.direction="";
            }
            }
        switch(event.type){
            case "touchstart":
                clientX_start=event.touches[0].clientX;
                clientY_start=event.touches[0].clientY;
                this.clientX_start=clientX_start;
                this.clientY_start=clientY_start;
                break;
            case "touchend":
                this.callbackFun();
                break;
            case "touchmove":
                event.preventDefault();
               
                clientX_end = event.changedTouches[0].clientX;
                clientY_end = event.changedTouches[0].clientY;
                //判断移动的方向
                distance=clientX_end-this.clientX_start;
                 console.log(clientY_end+" "+this.clientY_start+" "+clientY_end-this.clientY_start<1);
                if(this.clientX_start+minRange<clientX_end&&clientX_end-this.clientX_start>0&&clientY_end-this.clientY_start<1&&clientY_end-this.clientY_start>-1) {
                    this.direction='ltr';
                }
                else if(this.clientX_start-minRange>clientX_end&&this.clientX_start-clientX_end>0&&clientY_end-this.clientY_start<1&&clientY_end-this.clientY_start>-1){
                    this.direction='rtl';
                }
                break;
        }  
    }
}
 
window.addEventListener('load',load, false);
	
	</script>
</body>
</html>